<template>
  <span>
    <my-component-header />
    <el-main style="padding: 0px 100px">
      <div class="nav_menu">
        <my-component-navmenu />
        <my-component-breadcrumb :name="'手机套餐'" />
        <div class="phone_details_content">
          <el-card
            class="card_image"
            style="width: 300px"
            :body-style="{ padding: '0px' }"
          >
            <img
              :src="getCharIconSrc('phone', phone.phonename)"
              class="image"
            />
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ phone.phonetitle }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>

            <div class="phone_size">
              <span>内存： </span>
              <span>
                <el-radio-group v-model="phone.phonesize" size="small">
                  <el-radio-button label="64GB"></el-radio-button>
                  <el-radio-button label="128GB"></el-radio-button>
                  <el-radio-button label="256GB"></el-radio-button>
                </el-radio-group>
              </span>
            </div>

            <div class="phone_color">
              <span>颜色： </span>
              <span>
                <el-radio-group v-model="phone.phonecolor" size="small">
                  <el-radio-button label="紫色"></el-radio-button>
                  <el-radio-button label="白色"></el-radio-button>
                  <el-radio-button label="黑色"></el-radio-button>
                </el-radio-group>
              </span>
            </div>

            <div class="phone_type">
              <span>品牌: </span>
              <span>
                <el-tag size="small" type="primary" effect="dark">
                  {{ phone.phonetype }}
                </el-tag>
              </span>
            </div>

            <div class="phone_supplier">
              <span>供应商: </span>
              <span>
                <el-tag type="primary" effect="dark">
                  {{ suppliername }}
                </el-tag>
                <el-tag type="danger" effect="dark"> 免费配送 </el-tag>
                <el-tag type="danger" effect="dark"> 售后服务 </el-tag>
              </span>
            </div>

            <div class="phone_number">
              <span>数量: </span>
              <span>
                <el-input-number
                  v-model="phone.number"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="500"
                ></el-input-number>
              </span>
            </div>

            <div style="padding: 14px">
              <div class="price">
                <span class="original_price"
                  >￥ {{ phone.originalprice }}
                </span>
                <span class="discount_price">￥ {{ phone.discountprice }}</span>
              </div>
            </div>

            <div>
              <el-button @click="changeOrderVisible(true)" type="primary">
                <i class="el-icon-goods"></i>
                <span> 立即购买</span>
              </el-button>
            </div>
          </el-card>

          <my-component-order
            :type="type"
            :orderVisible="orderVisible"
            :product="phone"
          />
        </div>
      </div>
    </el-main>

    <el-footer>
      <my-component-footer />
    </el-footer>
  </span>
</template>

<script>
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Footer from "../../components/Footer.vue";
import Order from "../../components/Order.vue";
import Breadcrumb from "../../components/Breadcrumb";
//地区信息
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import { selectPhoneById, selectSupplierById } from "../../api/phone";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
    "my-component-order": Order,
    "my-component-breadcrumb": Breadcrumb,
  },
  data() {
    return {
      type: "phone",
      phone: {},
      phonesize: "",
      phonecolor: "",
      newOrderForm: {},
      paytype: "线上支付",
      delivery: "送货上门",
      rules: {},
      options: regionData,
      selectedOptions: [],
      orderVisible: false,
      suppliername: "",
    };
  },
  methods: {
    handleChange(value) {
      this.phone.number = value;
    },
  },
  created() {
    let dataObjFromIndex = this.$route.params;
    let phoneid = dataObjFromIndex.id;
    selectPhoneById(phoneid)
      .then(async (res) => {
        this.phone = res.data;
        this.phone.number = 1;
        let _this = this;
        await selectSupplierById(this.phone.supplierid)
          .then((res) => {
            _this.suppliername = res.data.suppliername;
          })
          .catch((err) => {
            this.$message.error(err);
          });
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
};
</script>

<style lang="scss">
@import "../../assets/css/global.scss";
@import "../../assets/css/product_details.scss";
</style>